/***************************************************************************
 * Administration Dashboard
 ***************************************************************************/

@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/tabs.less";
@import (reference) "rb/css/ui/admin/widgets.less";


@widget-border-color: @box-border-color;
@admin-light-border-color: #f5f5f5;
@admin-small-font-size: 11px;
@admin-large-font-size: 14px;
@table-border-color: @admin-light-border-color;
@table-header-color: #4b4b4b;
@widget-large-size: 460px;
@widget-small-size: 200px;
@widget-large-image-size: 225px;
@widget-small-image-size: 135px;

@admin-actions-width: @admin-sidebar-width + @page-container-padding;
@admin-actions-bg: #F0F0F2;
@admin-actions-border-color: @box-border-color;
@admin-actions-header-bg: @box-title-bg;


#rb-ns-ui.tabs.set-color-scheme(#rb-ns-ui.color-schemes.admin-dashboard());


#admin-actions {
  @admin-actions-width: @admin-sidebar-width + @page-container-padding;

  background: @admin-actions-bg;
  border-right: 1px @admin-actions-border-color solid;
  border-bottom: 1px @admin-actions-border-color solid;
  float: left;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: @admin-actions-width;
  box-sizing: border-box;
  z-index: @z-index-page-overlay;

  .admin-version {
    font-weight: bold;
    margin-top: 1em;
  }
}

#all-primary-widgets, #all-secondary-widgets {
  display: none;
}

#navbar {
  margin-left: -1px;
  padding-left: @admin-actions-width;

  .rb-c-tabs__tab {
    padding-top: 8px;

    &.-is-active {
      border-bottom: 1px transparent solid;
    }
  }
}

.clear {
  clear: both;
}


/**************************************************************************
 * Built-in widget styles
 **************************************************************************/

/**
 * The Review Board News widget.
 *
 * This displays the latest headlines from the Review Board news feed.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-news-widget">
 *      <div clas="rb-c-admin-widget__content">
 *       <a class="rb-c-admin-news-widget__item">
 *        ...
 *       </a>
 *       ...
 *      </div>
 *     </div>
 */
.rb-c-admin-news-widget {
  /**
   * An item from the news feed.
   *
   * Each item is styled as its own row in the widget.
   *
   * Structure:
   *     <a class="rb-c-admin-news-widget__item">
   *      <span class="rb-c-admin-news-widget__item-date">...</span>
   *      <span class="rb-c-admin-news-widget__item-title">...</span>
   *     </a>
   */
  &__item {
    display: table-row;
  }

  &__item-date,
  &__item-title {
    display: table-cell;
    padding: 0.5em;
  }

  /**
   * The date of a news post.
   *
   * This is positioned to the left of the news item's title.
   *
   * Structure:
   *      <span class="rb-c-admin-news-widget__item-date">...</span>
   */
  &__item-date {
    text-align: right;
  }

  /**
   * The title of a news post.
   *
   * This is positioned to the right of the news item's date.
   *
   * Structure:
   *      <span class="rb-c-admin-news-widget__item-title">...</span>
   */
  &__item-title {
    color: black;
  }
}


/* Server Cache widget */
#server-cache-widget {
  td, th {
    font-size: 10px;
  }
}

/* Review Board Activity widget */
#activity-graph-widget {
  .legendLabel {
    font-size: 10px;
  }

  .legend-btn {
    position: absolute;
    left: 30px;
    top: 10px;
    display: none;
    cursor: pointer;
  }
}

/**
 * The User Activity widget.
 *
 * This displays a graph showing the number of active users for different
 * ranges of times.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-user-activity-widget">
 *      <div class="rb-c-admin-widget__content">
 *       <div class="rb-c-admin-user-activity-widget__chart">...</div>
 *       <div class="rb-c-admin-user-activity-widget__user-total">...</div>
 *      </div>
 *     </div>
 */
.rb-c-admin-user-activity-widget {
  /**
   * The container for the chart to render into.
   *
   * Structure:
   *     <div class="rb-c-admin-user-activity-widget__chart">
   *      ...
   *     </div>
   */
  &__chart {
    width: 100%;
    height: 160px;
  }

  /**
   * A label listing the total number of users on the server.
   *
   * Structure:
   *     <div class="rb-c-admin-user-activity-widget__user-total">
   *      ...
   *     </div>
   */
  &__user-total {
    bottom: 10px;
    color: #545454;
    position: absolute;
    text-align: left;
    right: 1em;
  }
}


#repositories-widget {
  table {
    width: 100%;
  }
}


/***************************************************************************
 * Support banner
 ***************************************************************************/

#support-banner {
  @padding: 1em;

  border: 1px solid @box-border-color;
  border-radius: @box-border-radius;
  box-shadow: @box-shadow;
  box-sizing: border-box;
  margin: 0 0 1.5em 0;
  padding: @padding;

  &.loading {
    text-align: center;
  }

  &.error,
  &.community-support {
    background-color: #FFE4E1;
  }

  &.basic-support,
  &.premium-support {
    background-color: @trophy-banner-bg-color;
    background-image: url('../../../images/gold_box_top_bg.png');
  }

  h1, h2, h3 {
    font-size: 110%;
    margin-top: 0;
  }

  p {
    margin: (0.5 * @padding) 0;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
